<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">

</head>

<body>
<div class="layui-card-body">
    <form class="layui-form" action="" lay-filter="deptInfo" style="width: 700px;margin-top: 10px">
        <input id="id" name="id" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">题目标题</label>
            <div class="layui-input-block">
                <div id="title" style="padding: 9px 15px;">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="min-height: 400px">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <div id="content" style="padding: 9px 15px;">1+1=？</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项</label>
            <div id="options" class="layui-input-block">
                <input type="radio" id="optionA" name="option" value="A" title="1" lay-filter="filter">
                <input type="radio" id="optionB" name="option" value="B" title="2" lay-filter="filter">
                <input type="radio" id="optionC" name="option" value="C" title="3" lay-filter="filter">
                <input type="radio" id="optionD" name="option" value="D" title="4" lay-filter="filter">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="pre">上一题</button>
                <button type="button" class="layui-btn" id="submit">交卷</button>
                <button type="button" class="layui-btn layui-btn-primary" id="next">下一题</button>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>

    layui.use(['jquery', 'form', 'table', 'laypage', 'layer', 'laydate', 'tree', 'transfer', 'layedit'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        let jobId = CoreUtil.getUrlParam("jobId");
        var topicList = [];
        var answerMap = new Map();
        var index = 0;
        // 加载服务端题目
        CoreUtil.sendAjax("/study/topic/job", {jobId}, function (res) {
            res.forEach(topic => answerMap.set(topic.id, ""))
            topicList = res
            showTopic(0)
            index = 0;
        }, "GET", false, function (res) {
            //用户列表接口无权限回调
            layer.msg("抱歉！您暂无获取用户列表的权限");
        });

        var showTopic = function (index) {
            if (index < 0) {
                index += 1
                layer.msg("没有上一题了！！")
            }
            if (index >= topicList.length) {
                index -= 1
                layer.msg("没有下一题了！！")
            }
            let element = topicList[index];
            $("#id").val(element.id)
            $("#title").html(element.title)
            $("#content").html(element.content)
            $("#optionA").attr("title", element.optionA)
            $("#optionB").attr("title", element.optionB)
            $("#optionC").attr("title", element.optionC)
            $("#optionD").attr("title", element.optionD)
        }
        $("#options").click((e) => {
            let option = $("input[type='radio']:checked").val();
            let id = $("#id").val();
            console.log(option + id)
            answerMap.set(Number(id), option)
        })
        $("#pre").click(() => {
            index -= 1;
            showTopic(index)
        })
        $("#next").click(() => {
            index += 1;
            showTopic(index)
        })

        $("#submit").click(() => {
            let result = Array.from(answerMap).map(
                data => ({
                    "topicId": data[0],
                    "option": data[1],
                    jobId
                })
            );
            console.log(result)
            CoreUtil.sendAjax("/study/job/finishUpJob", JSON.stringify(result), function (res) {
                layer.msg(`恭喜你得分:${res}!!!`)
            }, "POST", false, function (res) {
                //用户列表接口无权限回调
                layer.msg("抱歉！您暂无获取用户列表的权限");
            });
        })
    })


</script>

</html>
